<template>

<section>
    <!--搜索框-->
    <el-col :span="24" class="toolbar">
        <el-form :model="filters" inline>
          <el-form-item label="">
              <el-input v-model="filters.name" placeholder="搜索关键字" prefix-icon="el-icon-search"></el-input>
          </el-form-item>
          <el-form-item>
			  <el-button type="primary" @click="handlerQuery" :loading="queryLoading">查询</el-button>
		  </el-form-item>
          <el-form-item>
			  <el-button type="primary" @click="handlerAdd">新增</el-button>
		  </el-form-item>
        </el-form>
    </el-col>
    <!--列表-->
    <el-col :span="24">
        <el-table :data="tableData" border v-loading="isTableLoading">
            <el-table-column label="编号" sortable prop="id" ></el-table-column>
            <el-table-column label="省份"  prop="province"></el-table-column>
            <el-table-column label="城市" prop="city"></el-table-column>
            <el-table-column label="城市编码" prop="cityCode"></el-table-column>
            <el-table-column label="时间" prop="createTime"></el-table-column>
            <el-table-column label="操作"width="185" align="center" >
                <template slot-scope="delScope">
                    <el-tooltip content="编辑" placement="top-end">
					    <el-button type="primary"  size="small" icon="el-icon-edit" @click="handlerEdit(delScope.$index, delScope.row)" ></el-button>
					</el-tooltip>
                    <el-tooltip content="删除" placement="top-end">
                        <el-button type="danger" icon="el-icon-delete" size="small" @click="handlerDelete(delScope.$index, delScope.row)"></el-button>
				    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
    </el-col>
    <!--分页-->
    <el-col :span="24" style="padding-top:20px">
        <el-pagination :total="total" background="" @current-change="handlerCurrentChange" layout="total,prev,pager,next"></el-pagination>
    </el-col>
    <!--添加-->
    <el-dialog title="添加城市" width="50%" :visible.sync="addFormVisiable">
        <el-form :model="addForm" :rules="formRules" ref="addForm">
          <el-form-item label="省份" inline-message  prop="province">
              <el-input v-model="addForm.province" placeholder="输入省份"></el-input>
          </el-form-item>
          <el-form-item label="城市" prop="city">
              <el-input v-model="addForm.city" placeholder="输入城市"></el-input>
          </el-form-item>
          <el-form-item label="城市编码" prop="cityCode">
              <el-input v-model="addForm.cityCode" placeholder="输入城市编码"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisiable = false">取消</el-button>
				<el-button type="primary" @click.native.prevent="handlerAddSubmit" :loading="addLoading">提交</el-button>
		</div>
    </el-dialog>


    <!--编辑-->
    <el-dialog title="编辑城市" width="50%" :visible.sync="editFormVisiable">
        <el-form :model="editForm" :rules="formRules" ref="editForm">
            <el-input v-model="editForm.id" type="hidden"></el-input>
          <el-form-item label="省份" inline-message  prop="province">
              <el-input v-model="editForm.province" placeholder="输入省份"></el-input>
          </el-form-item>
          <el-form-item label="城市" prop="city">
              <el-input v-model="editForm.city" placeholder="输入城市"></el-input>
          </el-form-item>
          <el-form-item label="城市编码" prop="cityCode">
              <el-input v-model="editForm.cityCode" placeholder="输入城市编码"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
				<el-button @click.native="editFormVisiable = false">取消</el-button>
				<el-button type="primary" @click.native.prevent="handlerEditSubmit" :loading="editLoading">提交</el-button>
		</div>
    </el-dialog>

</section>
    
</template>

<script>
import {getCmbCityList,addCmbCity,delCmbCity,editCmbCity} from '@/api/api'
export default {
     data() {
         return {
             filters: {
                 name: ''
             },
             queryLoading:  false,
             isTableLoading: false,
             tableData: [],
             page: 1,
             total: 0,
             addFormVisiable: false,
             addLoading:    false,
             addForm :{
                 province:  '',
                 city:  '',
                 cityCode:  ''
             },
             editFormVisiable: false,
             editLoading:    false,
             editForm :{
                 id:'',
                 province:  '',
                 city:  '',
                 cityCode:  ''
             },
             formRules:{
                 province:[
                     {
                         required: true,
                         message: '请填写省份信息',
                         trigger: 'blur'
                     }
                 ],
                 city: [
                     {
                         required: true,
                         message: '请填写城市信息',
                         trigger: 'blur'
                     }
                 ],
                 cityCode: [
                     {
                         required: true,
                         message:   '请填写城市编码信息',
                         trigger:   'blur'
                     }
                 ]
             }
         }
     },
     methods:{
         //添加对话框按钮时间
         handlerAddSubmit: function(){
             this.$refs.addForm.validate((vali)=>{
                 if(vali){
                    this.addLoading=true;
                    let param=Object.assign({},this.addForm);
                    addCmbCity(param).then(data =>{
                        this.addLoading=false;
                        this.addFormVisiable=false;
                        let {code,msg,retData}=data;
                        if(code!=200){
                            this.$message({
                                type:   'error',
                                message:    msg
                            });
                        }else{
                            this.$message({
                               type: 'success',
                               message: '添加成功'
                           });
                            this.handlerList();
                        }
                    });
                 }
             });

         },
         //更新对话框按钮时间
         handlerEditSubmit: function(){
             this.$refs.editForm.validate((vali)=>{
                 if(vali){
                    this.editLoading=true;
                    let param=Object.assign({},this.editForm);
                    editCmbCity(param).then(data =>{
                        this.editLoading=false;
                        this.editFormVisiable=false;
                        let {code,msg,retData}=data;
                        if(code!=200){
                            this.$message({
                                type:   'error',
                                message:    msg
                            });
                        }else{
                            this.$message({
                               type: 'success',
                               message: '更新成功'
                           });
                            this.handlerList();
                        }
                    });
                 }
             });

         },
         //查询按钮事件
         handlerQuery: function(){
             this.queryLoading=true;
             this.handlerList();
             this.queryLoading=false;
         },
         handlerEdit: function(index,row){
             this.editFormVisiable=true;
             this.editForm=Object.assign({},row);
         },
         handlerDelete: function(index,row){
             this.$confirm('确定要删除吗？','提示',{}).then(() =>{
                  let param={
                      id: row.id
                  };
                  this.isTableLoading=true;
                  delCmbCity(param).then(data=>{
                       this.isTableLoading=false;
                       let {code,msg,retData}=data;
                       if(code!=200){
                           this.$message({
                               type: 'error',
                               message: msg
                           });
                       }else{
                           this.$message({
                               type: 'success',
                               message: '删除成功'
                           });
                           this.handlerList();
                       }
                  });
             });
         },
         handlerAdd: function(){
             this.addForm={};
             this.addFormVisiable=true;
         },
         handlerCurrentChange: function(val){
             this.page=val;
             this.handlerList();
         },
         handlerList:function(){
              let param={
                pageCurrent:this.page,
                pageSize:10,
                searchKey:this.filters.name
              }
              this.isTableLoading=true;
              getCmbCityList(param).then(data=>{
                this.isTableLoading=false;
                let{code,msg,retData}=data;
                if(code!=200){
                    this.$message({
                        type: 'error',
                        message: msg
                    });
                }else{
                    this.total=retData.total;
                    this.tableData=retData.list;
                }
              });
         }
     },
     mounted() {
        this.handlerList();
     }
}
</script>

<style>

</style>
